import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './home.css';

const Home: React.FC = () => {
  const navigate = useNavigate();
  const [bgColor, setBgColor] = useState('#ff6b6b');

  useEffect(() => {
    const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeead'];
    let colorIndex = 0;
    
    const interval = setInterval(() => {
      colorIndex = (colorIndex + 1) % colors.length;
      setBgColor(colors[colorIndex]);
    }, 3000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="home" style={{ backgroundColor: bgColor }}>
      <div className="content-container">
        <h1 className="main-title">
          欧亦赛打印机控制中心
        </h1>

        <button 
          className="start-button"
          onClick={() => navigate('/printers')}
        >
          立即开始
        </button>

        <p className="copyright">
        © 2023 - {new Date().getFullYear()} OEasy All Rights Reserved
        </p>
      </div>
    </div>
  );
};

export default Home; 